<template>
  <div class="singer">
          
       <div class="info" v-for="(val, key) in list" :key="key">

          <mt-cell class="list" :title="item.title" is-link
            v-for="item in val" :key="item.title"
          >
          </mt-cell>
          
       </div>
        
   </div>
</template>

<script>
import { Cell } from 'mint-ui';
import { getSinger } from '@/severs'


export default {
  name: 'HelloWorld',
  components: {
    mtCell: Cell
  },
  data () {
    return {
      list: { hot: [], hy: [],  rh: [],om: []  }
    }
  },
  async created(){
      let {data} =  await getSinger();
      data.data.filter(item =>{
         if(/华语/g.test(item.classname)){
             this.list.hy.push({
                title: item.classname
             })
          }else if(/日韩/g.test(item.classname)){
             this.list.rh.push({
                title: item.classname
             })
         }else if(/欧美/g.test(item.classname)){
           this.list.om.push({
                title: item.classname
             })
         }else {
            this.list.hot.push({
                title: item.classname
             })
         }
      })
      console.log(this.list);

  }
}
</script>

<style lang="less">
   .singer {
       margin-top:8rem;
       padding: 0 10px;
       .info { border: #dedede 1px solid;border-radius: .5rem; margin-bottom:1.5rem;}
       .list {  border-bottom: #dedede 1px solid;}
       .list:last-child { border: none;}
       .mint-cell, .mint-cell-wrapper { background: none;}
       .mint-cell-text { padding: 0 10px;}
       
   }
  
</style>
